<template>
  <div class="anchorList">
    <!-- 搜索 -->
    <div class="search">
      <div class="searchVal">
        <p>时间</p>
        <el-date-picker
          style="margin-right: 20px"
          v-model="TimeVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
        >
        </el-date-picker>
      </div>
      <el-input placeholder="请输入内容" v-model="anchorID">
        <template slot="prepend">主播ID</template>
      </el-input>
      <el-button @click="search">查询</el-button>
      <el-button @click="excel">导出Excel</el-button>
    </div>
    <!-- 表格 -->
    <el-card>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column align="center" prop="id_code" label="ID">
        </el-table-column>
        <el-table-column align="center" prop="headimg" label="头像">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.headimg"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="nick_name"
          label="账号昵称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="union_join_time"
          label="加入时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="days"
          label="加入天数"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="last_login_time"
          label="最后登陆时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column
          prop="address"
          label="最后下线时间"
          show-overflow-tooltip
        >
        </el-table-column> -->
        <!-- <el-table-column
          align="center"
          prop="diamond"
          label="个人总收益"
          show-overflow-tooltip
        >
        </el-table-column> -->
        <el-table-column
          align="center"
          prop="total_money"
          label="工会总收益"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="is_del"
          label="账号状态"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.is_del == "0" ? "正常" : "封禁" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button @click="details(scope.row)">详情</el-button>
            <el-button @click="group(scope.row)">绑定小组</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 小组绑定 -->
    <el-dialog title="绑定小组" :visible.sync="dialogFormVisible" width="25%">
      <el-select v-model="groupCheck" placeholder="请选择分组">
        <el-option
          v-for="(item, index) in groupList"
          :key="index"
          :label="item.group_name"
          :value="item.id"
        ></el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { anchorList_api, group_api, personGroup_api } from "@/api/union";
export default {
  components: { Pagination },
  data() {
    return {
      TimeVal: "", //时间日期选择
      //   日期时间选择器数组
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      timeStart: "", //开始时间
      timeEnd: "", //结束时间
      anchorID: "", //主播ID
      obj: {},

      tableData: [], //表格
      loading: false,
      page: 1, //当前页
      pageSize: 10, //当前页条数
      total: 0, //总计
      dialogFormVisible: false,
      groupCheck: "",
      groupList: [],
      user_id: "",
    };
  },
  created() {
    this.obj = JSON.parse(localStorage.getItem("unionId"));
    this.getAnchorList();
  },
  methods: {
    //获取开始/结束时间
    focus(time) {
      if (!this.TimeVal) {
        this.TimeVal = [];
      }
      this.timeStart = this.TimeVal[0];
      this.timeEnd = this.TimeVal[1];
    },
    async getAnchorList() {
      let { code, data } = await anchorList_api({
        page: this.page,
        pageSize: this.pageSize,
        startTime: this.timeStart,
        endTime: this.timeEnd,
        id: this.anchorID,
        union_id: this.obj.id,
      });
      if (code == 0) {
        this.tableData = data.list;
        this.total = parseInt(data.total);
        console.log(data, "9955");
      }
    },
    // 详情
    details(row) {
      this.$router.push({
        path: "/anchorDetails",
        query: {
          id: row.id_code,
        },
      });
    },
    getList() {
      this.getAnchorList();
    },
    search() {
      this.getList();
    },
    // 绑定小组
    async group(row) {
      this.groupCheck = row.group_id;
      let { code, data } = await group_api({
        union_id: this.obj.id,
      });
      if (code == 0) {
        this.groupList = data.list;
        this.dialogFormVisible = true;
        this.user_id = row.id_code;
      }
    },
    // 确认绑定
    async submit() {
      let { code, data } = await personGroup_api({
        union_id: this.obj.id,
        group_id: this.groupCheck,
        user_id: this.user_id,
      });
      if (code == 0) {
        this.$message({
          type: "success",
          message: "绑定成功!",
        });
        this.dialogFormVisible = false;
      }
    },
    // 导出excel
    async excel() {
      let { code, data } = await anchorList_api({
        page: this.page,
        pageSize: 1000,
        startTime: this.timeStart,
        endTime: this.timeEnd,
        id: this.anchorID,
        union_id: this.obj.id,
      });
      data.list.forEach((item) => {
        item.is_del == 0 ? (item.is_del = "正常") : (item.is_del = "封禁");
      });
      const head = [
        "ID",
        "头像",
        "账号昵称",
        "加入时间",
        "加入天数",
        "最后登陆时间",
        "个人总收益",
        "工会总收益",
        "账号状态",
      ];
      const fails = [
        "id_code",
        "headimg",
        "nick_name",
        "union_join_time",
        "days",
        "last_login_time",
        "diamond",
        "total_money",
        "is_del",
      ];
      if (data.list.length != 0) {
        this.$excel(data.list, head, fails, "审核记录");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.anchorList {
  margin: 30px;
  height: 100%;
  .search {
    display: flex;
    margin-bottom: 30px;
    .searchVal {
      display: flex;
      p {
        width: 80px;
        text-align: center;
        border: 1px solid #dcdfe6;
        border-right: 0px;
        height: 40px;
        line-height: 20px;
        margin: 0px;
        background: #f5f7fa;
        color: #909399;
        font-size: 14px;
        padding: 10px;
        border-radius: 4px 0px 0px 4px;
      }
    }
    /deep/.el-input {
      width: 300px;
    }
    /deep/.el-button {
      margin-left: 30px;
    }
  }
}
</style>